import type { TableColumnCtx } from 'element-plus';

import type { Dict } from '@croco/framework/types';

import type { DataFormItemProps, DataFormSchema } from '#/components/data-form/types';
import type { FieldProps, OnActionClickFn, RenderScope } from '#/components/data-table';

import { h } from 'vue';

import { ElText } from 'element-plus';

export function useTable(enums: Record<string, Array<Dict> | undefined>, onActionClick: OnActionClickFn): FieldProps[] {
    const formatter = (row: any, column: TableColumnCtx) => {
        switch (column.property) {
            case 'costTime': {
                if (row.costTime < 500) {
                    return h(ElText, { type: 'success' }, { default: () => row.costTime });
                } else if (row.costTime < 1000) {
                    return h(ElText, { type: 'info' }, { default: () => row.costTime });
                } else if (row.costTime < 1500) {
                    return h(ElText, { type: 'warning' }, { default: () => row.costTime });
                } else {
                    return h(ElText, { type: 'danger' }, { default: () => row.costTime });
                }
            }
            case 'status':
            case 'type': {
                const dict = enums[column.property]?.find((item) => item.value === row[column.property]);
                return h(ElText, { type: dict?.listClass || 'info' }, { default: () => dict?.label || '--' });
            }
            case 'timeFrame': {
                return row.createTime;
            }
            default: {
                return row[column.property];
            }
        }
    };
    return [
        { prop: 'title', label: '模块名称', search: { value: '' }, column: { width: 250, fixed: 'left' } },
        { prop: 'type', label: '操作类型', search: { value: '' }, column: { width: 110, fixed: 'left', formatter } },
        { prop: 'operator', label: '操作人员', search: true, column: { width: 110, fixed: 'left' } },
        { prop: 'ip', label: '操作地址', search: true, column: { width: 120 } },
        { prop: 'location', label: '操作地点', column: { width: 250 } },
        { prop: 'uri', label: '请求地址', column: { visible: false, width: 200 } },
        { prop: 'params', label: '请求参数', column: { visible: false, width: 350 } },
        { prop: 'method', label: '服务接口', column: { visible: false, width: 300 } },
        { prop: 'result', label: '响应报文', column: { visible: false, width: 350 } },
        { prop: 'costTime', label: '耗时（ms）', column: { width: 110, align: 'right', formatter } },
        { prop: 'description', label: '接口描述', column: { minWidth: 250 } },
        // { prop: 'operatorType', label: '用户类别', column: { visible: false, width: 110, formatter } },
        { prop: 'message', label: '错误信息', column: { visible: false, width: 250 } },
        { prop: 'status', label: '操作结果', search: { value: '' }, column: { width: 90, align: 'center', formatter } },
        { prop: 'timeFrame', label: '访问时间', search: { span: 2, order: 12 }, column: { width: 190, formatter } },
        {
            column: {
                width: 90,
                render: [{ icon: 'icon:chat-line-square', onClick: (scope: RenderScope) => onActionClick({ code: 'edit', scope }) }],
            },
        },
    ];
}

export function useForm(): DataFormSchema {
    const fields: DataFormItemProps[] = [
        { prop: 'id', primary: true },
        { prop: 'title', label: '模块名称', slot: 'title' },
        { prop: 'type', label: '操作类型', slot: 'type' },
        { prop: 'operator', label: '操作人员', slot: 'operator' },
        { prop: 'ip', label: '操作地址', slot: 'ip' },
        { prop: 'location', label: '操作地点', slot: 'location' },
        { prop: 'uri', label: 'URI', slot: 'uri' },
        { prop: 'params', label: '请求参数', slot: 'params' },
        { prop: 'method', label: '服务接口', slot: 'method' },
        { prop: 'result', label: '响应报文', slot: 'result' },
        { prop: 'costTime', label: '耗时（ms）', slot: 'costTime' },
        { prop: 'description', label: '描述', slot: 'description' },
        { prop: 'message', label: '错误信息', slot: 'message' },
        { prop: 'status', label: '操作结果', slot: 'status' },
        { prop: 'createTime', label: '访问时间', slot: 'createTime' },
    ];
    return { fields };
}
